<template>
<!-- 仪表盘页图表的实现

  box-card卡片的使用使布局更加方便

-->
<el-card class="box-card" body-style="width:100%;height:100%">
    <div>
        <span>
            <i style="font-size: 18px; font-weight: 550" class="el-icon-s-data">资产统计</i>
        </span>
    </div>
    <el-divider></el-divider>
    <div>
        <div class="item">
            <div style="margin-bottom: 20px;text-align: center;width: 42%;float: left;height: 100%;">
                <p style="margin-bottom: 10px">在用{{data.usingAsset}}</p>
                <el-progress type="circle" :percentage="usingPersent" :width="160" :stroke-width="16"></el-progress>
            </div>
            <div style="margin-bottom: 20px; text-align: center;width: 42%;float: right;margin-right: 20px;">
                <p style="margin-bottom: 10px">在库{{data.leisureAsset}}</p>
                <el-progress type="circle" :percentage="leisurePersent" :width="160" :stroke-width="16" color="#67c23a"></el-progress>
            </div>
        </div>
    </div>
</el-card>
</template>

<script>
import {
    defineComponent,
    onMounted,
    onUpdated,
    reactive,
    ref,
    toRaw,
    watch
} from "vue";
export default {
    props: ['assetStatistics'],
    setup(props) {
        const data = reactive(props.assetStatistics);

        const usingPersent = ref(0);
        const leisurePersent = ref(0);
        
        watch(data, (newValue, oldValue) => {
            usingPersent.value = (data.usingAsset*100/data.totalAsset).toFixed(2);
            leisurePersent.value = (data.leisureAsset*100/data.totalAsset).toFixed(2);
            
        })

        return {
            data,
            usingPersent,
            leisurePersent
        }
    }
};
</script>

<style>
.text {
    font-size: 14px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}
</style>
